<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>

    <style type="text/css">
        h4 { text-align: center ; }
        .outer { border: 1px solid blue ; width: 100px ; height: 30px ; line-height: 30px ; }
        .outer>.inner { display: none ; }
        /* 鼠标悬浮到 .outer 时 显示其内部的 .inner */
        .outer:hover .inner { display: block ;  }

        .wrapper { border: 1px solid blue ; width: 100px ; height: 30px ; line-height: 30px ; }
        .wrapper>.box { visibility: hidden ; }
        /* 鼠标悬浮到 .wrapper 时 显示其内部的 .box */
        .wrapper:hover .box { visibility: visible ; }

    </style>

</head>
<body>

    <div class="outer">
        显示
        <div class="inner">
            藜蒿炒腊肉
        </div>
    </div>

    <hr>

    <div class="wrapper">
        赣菜
        <div class="box">
            辣椒炒牛肉
        </div>
    </div>

</body>
</html>